<template>
  <van-tabs @click="onTabClick" sticky swipeable color="#9dc57a">
    <van-tab title="未使用">
      <div class="pd10">
        <van-radio-group v-model="coupon" @change="onChange">
          <van-radio checked-color="#9dc57a" :name="item" v-for="item in unusedCoupons">
            <coupon :name="item.name"
                    :value="item.value"
                    :code="item.couponCode"
                    :startAt="$moment(item.beginTime,'YYYY-MM-DD').format('YYYY.MM.DD')"
                    :endAt="$moment(item.endTime,'YYYY-MM-DD').format('YYYY.MM.DD')"
                    :condition="item.condition"/>
          </van-radio>
        </van-radio-group>
        <van-button :disabled="!coupon" @click="useCoupon" class="fixed-button">使用</van-button>
      </div>
    </van-tab>
    <van-tab title="已使用">
      <div class="pd10">
        <coupon v-for="item in usedCoupons"
                :name="item.name"
                :value="item.value"
                :code="item.couponCode"
                :startAt="$moment(item.beginTime,'YYYY-MM-DD').format('YYYY.MM.DD')"
                :endAt="$moment(item.endTime,'YYYY-MM-DD').format('YYYY.MM.DD')"
                :condition="item.condition"/>
      </div>
    </van-tab>

  </van-tabs>

</template>

<script>
  import Coupon from '@/components/Coupon'
  import { Button, Cell, RadioGroup, Radio, Toast, Tabs, Tab } from 'vant'
  import request from '@/utils/request'
  import 'vant/lib/cell/style'
  import 'vant/lib/radio/style'
  import 'vant/lib/radio-group/style'
  import 'vant/lib/button/style'
  import 'vant/lib/toast/style'
  import 'vant/lib/tabs/style'
  import 'vant/lib/tab/style'

  export default {
    name: 'CouponList',
    components: {
      Coupon,
      "van-cell": Cell,
      "van-radio": Radio,
      "van-radio-group": RadioGroup,
      "van-button": Button,
      "van-tabs": Tabs,
      "van-tab": Tab
    },
    data() {
      return {
        openid: '',
        pageId: undefined,
        coupons: [],
        coupon: ''
      }
    },
    computed: {
      usedCoupons() {
        return this.coupons.filter(c => c.status == 2)
      },
      unusedCoupons() {
        return this.coupons.filter(c => c.status == 1)
      }
    },
    created() {
      this.load()
    },
    mounted() {
    },
    methods: {
      load() {
        this.pageId = this.$route.query.pageId
        this.openid = this.$route.query.openid
        request({
          url: `/h5/page/coupon/list/${this.pageId}/${this.openid}`,
          method: 'get'
        }).then(res => {
          console.log(res.data)
          this.coupons = res.data
        })
      },
      onTabClick() {

      },
      onChange(coupon) {
        this.coupon = coupon
      },
      useCoupon() {
        if (!this.coupon) return
        request({
          url: '/h5/page/coupon/code/useCode',
          method: 'post',
          data: {
            pageId: this.pageId,
            couponId: this.coupon.couponId,
            code: this.coupon.couponCode,
            openid: this.openid
          }
        }).then(res => {
          Toast.success({
            message: '成功',
            duration: 1000,
            onOpened: () => {
              setTimeout(() => {
                this.load()
              }, 300)
            }
          })
        })
      }
    }
  }
</script>

<style>
  #app {
    background: #f1f1f1;
  }
  #app .van-radio__label {
    width: 100%;
  }
  .fixed-button {
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    display:block;
    width:100%;
    color:#fff;
    font-size:20px;
    background:#9dc57a;
  }
</style>
